<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            
            .box1 {
                width: 100px;
                height: 100px;

                /* 
                    颜色单位:
                        在css中可以直接使用颜色名来设置各种颜色
                            比如: red,orange,yellow,brown,grean,blue,black,white

                        RGB值:
                            - 光的三元色
                            - RGB通过三种颜色的不同浓度来调配出不同的颜色
                            - R red, G green, B blue.
                            - 每一种颜色的范围 在 0 ~ 255 (0% - 100%) 之间
                            - 语法: RGB(红色, 绿色, 蓝色)


                        RGBA:
                            - 就是在rgb的基础上增加了一个a表示不透明度
                            - 需要4个值，前三个和rgb一样，第四个表示不透明度
                            -   1表示完全不透明 0表示完全透明  .5半透明 .1 .2 .3都可以

                        十六进制的RGB值:
                            - 语法: #红色绿色蓝色
                            - 颜色浓度 00~ff
                            - 一共六位,前两位表示红色，中间两位表示绿色，后两位表示蓝色
                            - 如果颜色的两位两位都重复,可以进行简写
                                #aabbcc --> #abc

                        HSL值 HSLA值
                            H 色相      (0 - 360)
                            S 饱和度,颜色的浓度 (0% - 100%)    
                            L 亮度,颜色的亮度 0% - 100%

                        HSLA值
                              - 需要4个值，前三个和HSL一样，第四个表示不透明度
                        
                        
                */
                background-color: rgb(255, 124, 218);

                color: rgba(106, 153, 85, .5);

                background-color: #ff0000;
                background-color: #ff0;

                background-color: hsl(0, 100%, 80%);
                background-color: hsla(0, 100%, 80%, 0.678);
            }

        </style>
    </head>
    <body>
        
        <div class="box1"></div>

    </body>
</html>